<script setup lang="ts">
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue"
import AutoForm from "@/components/auto-form/AutoForm.vue"
import {onMounted, ref} from "vue";
import {AutoFormItem} from "@/interface/auto-form.ts";
import {Page} from "@/interface/base.ts";
import {MovieOrderReqVO, PageMovieOrderReqVO, PageMovieOrderRespVO} from "@/interface/movie-order.ts";
import {useMovieOrderEditApi, usePageMovieOrderApi} from "@/services/api";

const dialogVisible = ref(false)
const title = ref("")
const model = ref<Record<string, AutoFormItem>>({
  id: {
    key: "id",
    name: "订单ID",
    value: "",
    itemType: "none"
  },
  isCancel: {
    key: "isCancel",
    name: "是否取消",
    value: 0,
    itemType: "radio",
    options: [
      {
        label: "是",
        value: 1
      },
      {
        label: "否",
        value: 0
      }
    ],
    rules: {
      required: true,
      message: '请选择是否取消',
      trigger: 'blur'
    }
  },
  isComplete: {
    key: "isComplete",
    name: "是否完成",
    value: 0,
    itemType: "radio",
    options: [
      {
        label: "是",
        value: 1
      },
      {
        label: "否",
        value: 0
      }
    ],
    rules: {
      required: true,
      message: '请选择是否完成',
      trigger: 'blur'
    }
  }
})
const statusList = ref([
  {
    value: 0,
    label: "全部"
  },
  {
    value: 1,
    label: "已完成"
  },
  {
    value: 2,
    label: "已取消"
  },
])
const pageMovieOrderReq = ref<PageMovieOrderReqVO>({
  size: 10,
  current: 1
})
const movieOrderTableData = ref<Page<PageMovieOrderRespVO>>({
  list: [],
  total: 0
})
const loadData = async () => {
  const {data: res} = await usePageMovieOrderApi(pageMovieOrderReq.value)
  movieOrderTableData.value = res
}
/**
 * 根据影厅名称进行搜索
 */
const handleSearch = (): void => {
  loadData()
}
/**
 * 处理影厅预览操作
 */
const handleDetail = () => {

}
/**
 * 处理影厅编辑操作操作
 */
const handleEdit = (row: MovieOrderReqVO) => {
  title.value = "编辑"
  Object.keys(model.value).forEach(key => {
    model.value[key].value = row[key]
  })
  dialogVisible.value = true
}
const handleSizeChange = () => {
  pageMovieOrderReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageMovieOrderReq.value.current = val
  loadData()
}
const onSubmit = async (data: MovieOrderReqVO) => {
  if (data.id) {
    await useMovieOrderEditApi(data)
    await loadData()
  }
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageMovieOrderReq" class="demo-form-inline">
        <el-form-item label="订单ID">
          <el-input v-model="pageMovieOrderReq.id" placeholder="请输入订单ID" clearable/>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="pageMovieOrderReq.nickName" placeholder="请输入用户昵称" clearable/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="pageMovieOrderReq.status" placeholder="Select">
            <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="movieOrderTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"/>
        <el-table-column prop="movieName" label="电影名称" width="90"/>
        <el-table-column prop="images" label="电影名称" width="90">
          <template #default="scope">
            <el-image style="width: 60px; height: 100px" :src="scope.row.images" fit="contain"/>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="用户昵称" width="90"/>
        <el-table-column prop="movieStartTime" label="电影开场时间" width="150"/>
        <el-table-column prop="seatList" label="座位" width="180">
          <template #default="scope">
            <div class="seat-list">
              <el-text
                  v-for="(seat,index) in scope.row.seatList"
                  :key="index"
              >
                {{ (seat.rowCode+1) + "排" + (seat.columnCode+1) + "列" }}
              </el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="购票时间" width="180"/>
        <el-table-column prop="isCancel" label="是否取消" width="120">
          <template #default="scope">
            <el-tag
                :type="scope.row.isCancel == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.isCancel == 1 ? "是" : "否" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isComplete" label="是否完成" width="120">
          <template #default="scope">
            <el-tag
                :type="scope.row.isComplete == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.isComplete == 1 ? "是" : "否" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否完成" width="120">
          <template #default="scope">
            <div>
              {{ "￥" + scope.row.price  }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageMovieOrderReq.current"
          v-model:page-size="pageMovieOrderReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="movieOrderTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit"
               @onCancel="onCancel"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}

.seat-list {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
</style>